<template>
	<view class="bgimg2 p-2 box-sizing bgF8F8F8 my-page overflow-y">
		<image src="/static/imgs/setup.png" mode="aspectFill" class="w-40 h-40 position-absolute top-0 right-0 mt-4 mr-3"
			@tap="navTo('/pages/changeInfo/changeInfo')">
		</image>
		<view class="flex align-center mb-4" style="padding-top:44px" @tap="navTo('/pages/changeInfo/changeInfo')">
			<image :src="getUser.logo" mode="aspectFill" class="rounded-circle bgF3F5FA" style="width: 68px;height: 68px;">
			</image>
			<view class="flex flex-column flex-1 ml-2">
				<text class="text-white fs-40">{{getUser.nickname || '--'}}</text>
				<view class="flex align-center justify-between my-1">
					<text class="ftrgba1 fs-24">ID: {{getUser.id}}</text>
					<image src="/static/imgs/right2.png" mode="aspectFill" class="w-40 h-40"></image>
				</view>
				<view class="fs-24 text-white">{{getUser.bio || '--'}}</view>
			</view>
		</view>

		<view class="cabin-box mb-4 mx-auto">
			<view class="flex align-center justify-between px-4 pt-4 mb-7" @tap="navTo('/pages/vip/vip')">
				<image src="/static/imgs/vip_title.png" mode="aspectFill" style="width: 422rpx;height: 22rpx;"></image>
				<text class="bglg2 px-3 py-1 fs-26 text-black rounded-circle">{{$t('hhh.t13')}}</text>
			</view>
			<view class="flex align-center px-3">
				<view class="flex align-center bgF6F5FF justify-center py-2 flex-1 rounded-lg"
					@tap="navTo('/pages/wallet/wallet')">
					<image src="/static/imgs/qianbao.png" mode="aspectFill" class="w-60 h-60"></image>
					<text class="text-black fs-28 ml-2">{{$t('hhh.t14')}}</text>
				</view>
				<view class="flex align-center bgF6F5FF justify-center py-2 ml-3 flex-1 rounded-lg"
					@tap="navTo('/pages/coupons/coupons')">
					<image src="/static/imgs/qianbao.png" mode="aspectFill" class="w-60 h-60"></image>
					<text class="text-black fs-28 ml-2">{{$t('hhh.t15')}}</text>
				</view>
			</view>
		</view>

		<view class="rounded-lg bg-white flex align-center py-2 mb-4 box-shadow2 mx-1">
			<view class="flex flex-column align-center w-25bf" @tap="navTo('/pages/rank/rank')">
				<image src="/static/imgs/ranks.png" mode="aspectFill" class="w-56 h-56 mb-1"></image>
				<text class="fs-24 text-black">{{$t('hhh.t16')}}</text>
			</view>
			<view class="flex flex-column align-center w-25bf" @tap="navTo('/pages/favorites/favorites')">
				<image src="/static/imgs/favrs.png" mode="aspectFill" class="w-56 h-56 mb-1"></image>
				<text class="fs-24 text-black">{{$t('hhh.t17')}}</text>
			</view>
			<view class="flex flex-column align-center w-25bf" @tap="navTo('/pages/order/order')">
				<image src="/static/imgs/order.png" mode="aspectFill" class="w-56 h-56 mb-1"></image>
				<text class="fs-24 text-black">{{$t('hhh.t18')}}</text>
			</view>
			<view class="flex flex-column align-center w-25bf" @tap="incodeshow = true">
				<image src="/static/imgs/invite.png" mode="aspectFill" class="w-56 h-56 mb-1"></image>
				<text class="fs-24 text-black">{{$t('hhh.t19')}}</text>
			</view>
		</view>

		<view class="rounded-lg bg-white box-shadow2 mx-1">
			<view class="flex align-center px-2 py-4" @tap="navTo('/pages/verification/verification')">
				<image src="/static/imgs/idcard.png" mode="aspectFill" class="w-48 h-48"></image>
				<text class="text-black fs-28 flex-1 ml-2">{{$t('hhh.t20')}}</text>
				<image src="/static/imgs/right3.png" mode="aspectFill" class="w-40 h-40"></image>
			</view>
			<view class="flex align-center px-2 py-4" @tap="feedbackshow = true">
				<image src="/static/imgs/feedback.png" mode="aspectFill" class="w-48 h-48"></image>
				<text class="text-black fs-28 flex-1 ml-2">{{$t('hhh.t21')}}</text>
				<image src="/static/imgs/right3.png" mode="aspectFill" class="w-40 h-40"></image>
			</view>
			<view class="flex align-center px-2 py-4" @tap="contactShow = true">
				<image src="/static/imgs/us.png" mode="aspectFill" class="w-48 h-48"></image>
				<text class="text-black fs-28 flex-1 ml-2">{{$t('hhh.t22')}}</text>
				<image src="/static/imgs/right3.png" mode="aspectFill" class="w-40 h-40"></image>
			</view>
		</view>

		<u-gap height="100" bgColor="transparent"></u-gap>

		<u-popup :show="incodeshow" :round="10" mode="center">
			<view class="position-relative p-4 box-sizing" style="width: 600rpx;">
				<view class="fs-32 font-weight-bold text-black text-center">{{$t('hhh.t19')}}</view>

				<view class="bgF6F7F9 rounded-lg px-2 py-1 mt-3">
					<u--input inputAlign="center" :placeholder="$t('hhh.t19')" border="surround" v-model.trim="incode"
						:customStyle="{
								'border':0
							}"></u--input>
				</view>

				<u-gap height="80" bgColor="transparent"></u-gap>
				<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold"
					@tap="bindClub">{{$t('hhh.t24')}}
				</view>

				<image class="position-absolute closeicon" src="/static/imgs/close.png" mode="aspectFill"
					@tap="incodeshow = false"></image>
			</view>
		</u-popup>

		<u-popup :show="feedbackshow" :round="10" mode="center">
			<view class="position-relative p-4 box-sizing" style="width: 600rpx;">
				<view class="fs-32 font-weight-bold text-black text-center">{{$t('hhh.t21')}}</view>

				<view class="bgF6F7F9 rounded-lg  px-2 py-1 mt-5">
					<u--textarea height="100" v-model.trim="feedback" :placeholder="$t('hhh.t159')"></u--textarea>
				</view>

				<u-gap height="80" bgColor="transparent"></u-gap>
				<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold"
					@tap="feedbackConfirmFn">{{$t('hhh.t24')}}
				</view>

				<image class="position-absolute closeicon" src="/static/imgs/close.png" mode="aspectFill"
					@tap="feedbackshow = false"></image>
			</view>
		</u-popup>

		<u-popup :show="contactShow" :round="10" mode="bottom" bgColor="transparent">
			<view class="mx-auto" style="width: 700rpx;height: 35dvh;">
				<view class="rounded-max-lg bg-white flex flex-column align-center p-4">
					<view class="flex align-center justify-center bgF3F5FA rounded-circle w-100 py-3 mb-4 position-relative"
						@tap="copyText('18800110022')">
						<image src="/static/imgs/contact_phone.png" mode="aspectFill" style="width: 44rpx;height: 44rpx;"></image>
						<text class="ml-4">18800110022</text>
						<image src="/static/imgs/contact_copy.png" mode="aspectFill"
							class="w-32 h-32 position-absolute right-0 top-0 mr-5 mt-3"></image>
					</view>
					<view class="flex align-center justify-center bgF3F5FA rounded-circle w-100 py-3 position-relative"
						@tap="copyText('3H@163.com')">
						<image src="/static/imgs/contact_email.png" mode="aspectFill" style="width: 44rpx;height: 44rpx;"></image>
						<text class="ml-4">3H@163.com</text>
						<image src="/static/imgs/contact_copy.png" mode="aspectFill"
							class="w-32 h-32 position-absolute right-0 top-0 mr-5 mt-3"></image>
					</view>
				</view>

				<view class="rounded-lg bg-white py-3 mt-2 text-center" @tap="contactShow = false">{{$t('hhh.t26')}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				incodeshow: false,
				incode: '',
				feedbackshow: false,
				feedback: '',
				contactShow: false
			}
		},
		computed: {
			...mapGetters(['getUser'])
		},
		onShow() {
			this.setTabbarLang()
		},
		methods: {
			bindClub() {
				if (!this.incode) {
					uni.$tools.toast(this.$t('hhh.t75'))
					return
				}
				HttpApi.bindClub({
					club_code: this.incode
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t74'))
						this.incodeshow = false
						this.incode = ''
					}
				})
			},
			feedbackConfirmFn() {
				if (!this.feedback) {
					uni.$tools.toast(this.$t('hhh.t138'))
					return
				}
				const club_id = uni.getStorageSync('club_id')
				HttpApi.feedbackSubmit({
					content: this.feedback,
					club_id: club_id || null
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t116'))
						this.feedback = ''
						this.feedbackshow = false
					}
				})
			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						console.log('复制成功');
						uni.showToast({
							title: '复制成功'
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
						console.error('复制失败:', err);
					}
				});
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-page {
		min-height: calc(100dvh - 60px);

		.cabin-box {
			width: 694rpx;
			height: 292rpx;
			background-image: url('/static/imgs/my_cabin_bg.png');
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: center top;
		}
	}
</style>